<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>完美flex横向瀑布流布局</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style>
  .primary {
    display: flex;
    flex-wrap: wrap;
  }
  /*占位元素，最后一行图片过少时，图片不缩放*/
  .primary::after {
    content: '';
    flex-grow: 999999999;
    min-width: 200px; /* 图片可以占满一行时保证换行，否则最后一行末尾可能会出现一小段空白 */
    height: 0;
  }
  .image-box {
    margin: 5px;
    display: block;
  }
  .image-box img {
    display: block;
    width: 100%;
  }
  </style>
</head>
<body>
<div id="app" class="primary">
  <div
    v-for="(image,key) in images"
    :key="key"
    class="image-box"
    :style="{
      width: `${image.width * 200 / image.height}px`,
      flexGrow: image.width / image.height * 1000
    }"
  >
    <img :src="image.src" alt="">
  </div>
</div>
</body>
<script>
new Vue({
  el: '#app',
  data() {
    return {
      imagesBaseUrl: './images',
      images: []
    }
  },
  methods: {
    getImage(imageSrc) {
      let img = new Image();
      img.src = imageSrc;
      //获取图片尺寸
      img.onload = () => {
        this.images.push({
          src: img.src,
          width: img.width,
          height: img.height
        });
      }
    }
  },
  mounted() {
    for (let i = 0; i < 28; i++) {
      const imageSrc = `${this.imagesBaseUrl}/i${i}.jpg`;
      this.getImage(imageSrc);
    }
  }
})
</script>
</html>
